<template>
  <ve-liquidfill :data="chartData" height="100%" :settings="chartSettings"/>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        columns: ['title', 'percent'],
        rows: [{
          title: 'rate',
          percent: 0.58
        }]
      },
      chartSettings: { }
    }
  },
  mounted() {
    this.chartSettings = {
      seriesMap: {
        rate: {
          radius: '80%',
            label: {
            textStyle: {
              fontSize: 36,
                color: '#999',
                fontWeight: 'normal'
            },
            position: ['50%', '50%'],
              insideColor: '#fff'
          },
          outline: {
            itemStyle: {
              borderColor: '#aaa4a4',
                borderWidth: 1,
                color: 'none',
                shadowBlur: 0,
                shadowColor: '#fff'
            },
            borderDistance: 0
          },
          backgroundStyle: {
            color: '#fff'
          },
          itemStyle: {
            shadowBlur: 0,
              shadowColor: '#fff'
          },
          color: ['rgba(97,216,0,.7)']
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
